<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2023-07-23
  Time: 10:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>部门管理页面</title>
    <link href="layui/css/layui.css" rel="stylesheet">
    <link href="css/deptList_styles.css" rel="stylesheet" >
    <script src="layui/layui.js"></script>
</head>
<body>
<div class="layui-container" style="margin-top: 30px;">
    <div class="layui-row">
        <div class="layui-col-md4">
            <label class="layui-form-label">部门编号</label>
            <input id="put_deptno" type="text" class="layui-input">
        </div>
        <div class="layui-col-md4">
            <label class="layui-form-label">部门名</label>
            <input id="put_dname" type="text" class="layui-input">
        </div>
        <div class="layui-col-md4">
            <label class="layui-form-label">部门地址</label>
            <input id="put_loc" type="text" class="layui-input">
        </div>
    </div>

    <div class="layui-row" style="margin-top: 20px;">
        <div class="layui-col-md2">
            <button class="layui-btn layui-btn-primary" id="put_new_dept_btn" onclick="addNewDept()">
                <i class="layui-icon layui-icon-add-circle"></i> 新增
            </button>
        </div>
        <div class="layui-col-md2">
            <button class="layui-btn layui-btn-primary" id="put_clear_dept_btn" onclick="clearNewDept()">
                <i class="layui-icon layui-icon-refresh"></i> 清空
            </button>
        </div>
    </div>

    <table class="layui-table" id="tb_dept" lay-filter="dept_filter"></table>

    <script type="text/html" id="toolbarDept">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit">
                <i class="layui-icon layui-icon-edit"></i> 编辑
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">
                <i class="layui-icon layui-icon-delete"></i> 删除
            </button>
        </div>
    </script>
</div>

</script>
</body>
<script>
    var $;
    var table;
    layui.use(['table','jquery','layer'],function (){
        table=layui.table;
        $=layui.jquery;
        var layer=layui.layer;
        var inst=table.render({
            elem:'#tb_dept',<!--引用的表格的id-->
            url:"getDeptByPage",
            cols:[[//标题栏
                {field:'deptno',title:'部门编号',width:220,sort:true},
                {field:'dname',title:'部门名',width:220},
                {field:'loc',title:'部门地址',width:220},
                {title: '操作',width: 237,toolbar:"#toolbarDept"}
             ]],
            // skin: 'line', // 表格风格
            even:true,  //斑马条纹
            page:true,  //分页组件
            limits:[10,20,30,40,50], //下拉框可选显示的条数
            limit:10, //每页默认显示的条数
            page:1//默认显示的页数
        });

        //table的工具栏事件
        table.on('tool(dept_filter)',function (obj){
            // alert(obj.data.deptno+":"+obj.event);
            var data=obj.data;//点击行的数据
            if(obj.event=='edit'){
                //部门编辑
                layer.open({
                    type:2,  //2代表显示另一个界面
                    title:['部门编辑','font-size:22px;color:#1e9fff;font-weight:bolder;margin-left:240px;'],
                    area:['600px','400px'],
                    content:'editDept.jsp',
                    fixed:false,
                    success:function (layero,index){
                        var body=layer.getChildFrame('body',index);//获取对话框的标签
                        //向body中传数据
                        body.find("#deptno").val(data.deptno);
                        body.find("#dname").val(data.dname);
                        body.find("#loc").val(data.loc);
                    }
                });
            }else if(obj.event=='delete'){
                //部门删除
                layer.confirm('确定删除该部门吗？', {icon: 3, title: '确认删除'}, function (index) {
                    $.ajax({
                        url: 'delDeptById',
                        type: 'POST',
                        data: {'deptno': data.deptno},
                        dataType: 'JSON',
                        success: function (data) {
                            if (data.code == 0) {
                                //重载表格
                                table.reloadData('tb_dept');
                                alert("删除成功");
                            }
                        },
                        error: function () {
                            alert("删除失败，请稍后重试.");
                        }
                    });
                    layer.close(index); // 关闭确认框
                });
            }
        })
    });

    function editDept(deptno,dname,loc){
        //ajax请求
        //部门编辑
        $.ajax({
            url: 'updateDept',
            type: 'POST',
            data:{'deptno':deptno,'dname':dname,'loc':loc},
            dataType: 'JSON',
            success: function (data) {
                if(data.code==0){
                    //重载表格
                    table.reloadData('tb_dept');
                    alert("编辑成功")
                }
            },
            error: function () {
                alert("编辑失败，请稍后重试.");
            }
        });
    }

    function clearNewDept(){
        document.getElementById("put_deptno").value='';
        document.getElementById("put_dname").value='';
        document.getElementById("put_loc").value='';
    }


    function addNewDept(){
        const put_deptno=document.getElementById("put_deptno").value;
        const put_dname=document.getElementById("put_dname").value;
        const put_loc=document.getElementById("put_loc").value;

        if (put_deptno.trim() === '' || put_dname.trim() === '' || put_loc.trim() === '') {
            alert('新增部门信息请填写完整的部门信息');
            return; // 如果有空值，不继续执行保存操作
        }

        //部门信息新增
        $.ajax({
            url: 'addNewData',
            type: 'POST',
            data:{'deptno':put_deptno,'dname':put_dname,'loc':put_loc},
            dataType: 'JSON',
            success: function (data) {
                if(data.code==0){
                    //重载表格
                    table.reloadData('tb_dept');
                    alert("添加成功")
                }
            },
            error: function () {
                alert("添加失败，请稍后重试.");
            }
        });

    }
</script>
</html>
